<template>
    <div class="searchglobal">
      
        <div class="ptlist">
            <div class="ptitem" v-for="item in slist" @click="tzym(item)" style="margin-bottom: 20px;">
                <div class="ptimg" style="margin-bottom: 0px;">
                    <img :src="item.cover" alt="">
                </div>
                <div class="ptinfo">
                    <div class="pttitle">{{ item.title }}</div>
                    <div class="price">￥{{ item.price }} <span>￥{{ item.t_price }}</span></div>
                </div>
  <div class="ptstatus">
            <div class="statustext">拼团中</div>
            <div class="daojishi">倒计时：<div>{{ item.days }}</div>天<div>{{ item.hours }}</div>:<div>{{ item.minutes }}
              </div>:
              <div>{{ item.seconds }}</div>
            </div>

          </div>
            </div>
        </div>

        <div style="display: flex;justify-content: center;"><n-pagination v-model:page="page"  :on-update:page="updatepage" :page-sizes="[10]" :item-count="count" /></div>
    </div>
</template>
<script setup>
import { NTabs, NTabPane,NPagination } from 'naive-ui';
import { useRouter } from 'nuxt/app';
let { ctx: that, proxy } = getCurrentInstance()
const router = useRouter();
const keyword = ref("");
const page = ref(1);
const count=ref(0);
const value = ref("course");
import { useRoute } from "vue-router"
const route = useRoute()
const slist = ref([])



onMounted(()=>{
    getlist()
})
const changetab = (e) => {
    console.log(e, "eee")
    // console.log(value.value)
    value.value = e
    page.value=1
    getlist();
}
const updatepage=(e)=>{
    console.log(e,"e")
    page.value=e
    getlist();
}
const getlist = async () => {
    const { data } = await useHttp("", `/group/list?page=${page.value}`)
    console.log(data)
    slist.value = data.value.rows
      slist.value.forEach(el => {

    console.log(new Date(el.end_time).toDateString())
    el.countdownTimer = setInterval(ptdjs, 1000);
  })
    count.value=data.value.count
    console.log(count)
}

const ptdjs = () => {
  slist.value.forEach(el => {
    el.now = new Date();
    el.endDate = new Date(el.end_time);
    el.distance = el.endDate - el.now;
    el.days = Math.floor(el.distance / (1000 * 60 * 60 * 24)) < 10 ? '0' + Math.floor(el.distance / (1000 * 60 * 60 * 24)) : Math.floor(el.distance / (1000 * 60 * 60 * 24));
    el.hours = Math.floor((el.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) < 10 ? '0' + Math.floor((el.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) : Math.floor((el.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    el.minutes = Math.floor((el.distance % (1000 * 60 * 60)) / (1000 * 60)) < 10 ? '0' + Math.floor((el.distance % (1000 * 60 * 60)) / (1000 * 60)) : Math.floor((el.distance % (1000 * 60 * 60)) / (1000 * 60));
    el.seconds = Math.floor((el.distance % (1000 * 60)) / 1000) < 10 ? '0' + Math.floor((el.distance % (1000 * 60)) / 1000) : Math.floor((el.distance % (1000 * 60)) / 1000);

    if (el.distance < 0) {
      clearInterval(el.countdownTimer);
    }
  })
}
const tzym=(item)=>{
    router.push(`/ptdetail/${item.group_id}/${item.id}`);
    
}
</script>
<style scoped>
.searchglobal {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.title {
    font-size: 20px;
}

.tabs {
    width: 100%;
    background: #fff;
}


.ptlist {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;

}

.pttitle {
    font-size: 15px;
    font-weight: bold;
}

.price {
    font-size: 15px;
    font-weight: bold;
    color: rgba(244, 63, 94, 1);
}

.price span {
    color: rgba(107, 114, 128, 0.7);
    text-decoration-line: line-through;
    font-weight: normal;
    font-size: 12px;
}

.ptstatus {
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(245, 158, 11, 1);
}

.statustext {
    font-size: 12px;
    color: #fff;
}

.ptitem {
  width: 24%;
  height: auto;
  margin-right: 20px;
  border-radius: 10px;
  cursor: pointer;
}

.ptitem:nth-child(4n) {
  margin-right: 0px !important;
}

.ptinfo {
  background: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
}

.cardimg {
  width: 100%;
}

.cardimg img {
  width: 100%;
  border-radius: 5px;
}

.ptimg {
  width: 100%;
  height: 200px;
}

.ptimg img {
  width: 100%;
  height: 200px;

}

.ptstatus {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(245, 158, 11, 1);
}

.statustext {
  font-size: 12px;
  color: #fff;
}

.daojishi {
  display: flex;
  font-size: 12px;
  color: #fff;
}

.daojishi div {
  padding: 2px 2px;
  border-radius: 2px;
  color: rgba(245, 158, 11, 1) !important;
  background: #fff;
  margin: 0 3px;
  padding: 2px 3px;

}
</style>